<template>
  <div class="page-content">
    <div class="text-right mb-2">
      <el-button size="small" @click="printPage">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div v-loading="initLoading">
      <div :id="printId">
        <div class="body-text">
          {{ data.gua_org_name_short }}（意向）函字
          <span class="text-decoration">[{{ data.letter_word_no || '-' }}]</span>
          第
          <span class="text-decoration">{{ data.letter_number_no || '-' }}</span>
          号
        </div>
        <h4 class="text-center py-5">担保意向函</h4>
        <div class="body-text">
          <span class="text-decoration">{{ relatedData.bank_name }}：</span>
        </div>
        <div class="text-indent">
          就申请人
          <span class="text-decoration">{{ replayName }}</span>
          向贵行申请人民币
          <span class="text-decoration">{{ total }}</span>
          、期限为
          <span class="text-decoration">{{ year }}年</span>
          的贷款业务事宜， 我公司拟对申请人所申请的上述信贷融资业务及债务金额的
          {{ data.bear_rate }}% 限提供担保。
        </div>
        <div class="text-indent">
          本意向函仅为业务洽谈之函，最终是否担保及担保金额、担保期限、担保方式等以我公司与贵行签订的担保合同为准。本意向函有效期为
          60 日。
        </div>
        <div class="text-right py-5" v-if="data.gua_company">
          <div>{{ data.gua_company }}</div>
          <div>负责人或授权代理人(签字)：{{ data.gua_company_sign }}</div>
          <div>{{ $utils.dateFormat(data.letter_date, 'yyyy年MM月dd日') }}</div>
        </div>

        <div v-if="relatedData.ele_letter_status > 1">
          <!-- 审批登记表没有ele_letter_status字段 -->
          <div>
            <div class="notice-divider"></div>
            <h4 class="text-center py-5">
              担保意向函回执联
              <span v-if="+relatedData.ele_letter_status === 3">（已拒绝）</span>
            </h4>
            <div>
              意向函编号：{{ data.gua_org_name_short }}（意向）函字
              <span class="text-decoration">[{{ data.letter_word_no || '-' }}]</span>
              第
              <span class="text-decoration">{{ data.letter_number_no || '-' }}</span>
              号
            </div>
            <div>
              申请人：
              <span class="text-decoration">{{ relatedData.corp_name }}</span>
            </div>
            <div>
              拟担保金额：
              <span class="text-decoration">{{ total }}</span>
              ， 拟担保期限：
              <span class="text-decoration">{{ year }}年</span>
            </div>
            <div>
              出函日期：
              <span class="text-decoration">
                {{ $utils.dateFormat(data.letter_date, 'yyyy年MM月dd日') }}
              </span>
            </div>
            <div class="d-flex align-items-center">
              <div>受函银行审查受理意见：</div>
              <div class="text-decoration">{{ data.bank_accept_option }}</div>
            </div>
            <div>受函银行（盖章）：{{ data.bank_name }}</div>
            <div class="d-flex justify-content-between">
              <div class="d-flex align-items-center">
                签收人（签字）：
                <span class="text-decoration">{{ data.bank_accept_sign }}</span>
              </div>
              <div class="right-date">
                签收日期：
                <span class="text-decoration">
                  {{ $utils.dateFormat(data.bank_accept_date, 'yyyy年MM月dd日') }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { printA4, addressFromLevel, nzhToMoney } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: Boolean,
  },
  data() {
    return {
      initLoading: false,
      data: {},
      tableName: 'ele_letter_info',
    }
  },
  computed: {
    ...mapGetters(['user']),
    replayName() {
      if (+this.relatedData.customer_type === 2) {
        return this.relatedData.corp_name || this.relatedData.corp_name
      } else {
        return `${this.relatedData.customer_name || this.relatedData.customer_name}（负责人：${
          this.relatedData.corp_name || this.relatedData.corp_name
        }）`
      }
    },
    queryAddressCode() {
      return this.user.queryAddressCode || this.user.addressCode
    },
    orgRegionLever() {
      return this.user.orgRegionLever
    },
    printId() {
      return `print-wrap-${this.relatedData.customer_related_id}`
    },
    total() {
      const num = this.relatedData.apply_funds || 0
      return nzhToMoney(num * 10000)
    },
    year() {
      const num = this.relatedData.approval_load_years || this.relatedData.load_years
      const text = nzhToMoney(num)
        .replace('元', '')
        .replace('整', '')
        .replace('角', '月')
        .replace('分', '')
      return text
    },
    isViewModel() {
      return !this.viewMode
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.getData()
      },
      deep: true,
    },
  },
  created() {
    // this.getAgency()
    this.getData()
  },
  methods: {
    async getAgency() {
      if (!this.queryAddressCode || !this.orgRegionLever) {
        this.getData()
        return
      }
      const params = {
        'orWhere.address_code.eq': [
          this.queryAddressCode,
          addressFromLevel(this.queryAddressCode, this.orgRegionLever - 1),
        ],
      }

      this.agencyLoading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, 'credit_select_view', params, {
          N1address_code: 'asc',
        })
      )
      this.agencyLoading = false

      const data = (res && res.data) || []
      this.agencies = data
      this.getData()
    },
    getData() {
      const params = {
        'customer_related_id.eq': this.relatedData.customer_related_id,
        'ele_letter_type.eq': 1,
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, params)
        .then(res => {
          this.data = (res && res.data && res.data[0]) || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAgencySelect(value) {
      const agency = this.agencies.find(item => item.client_id === value)
      this.data.gua_org_name_short = agency.org_name_short
      this.data.gua_org_code = agency.org_code
      this.data.gua_company_sign = agency.corp_name
      this.data.gua_company = agency.org_name
      this.data.letter_date = this.data.letter_date ? this.data.letter_date : new Date()
    },
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 3.2rem;}
        .text-decoration{text-decoration: underline;}
        .page-content {max-width: 794px;margin: 0 auto;font-size: 1.6rem;line-height: 2;}
        .notice-divider {height: 2px;border: 1px dashed #333;margin-top: 3rem;margin-bottom: 3rem;}
        .right-date {min-width: 14rem;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  border: 1px solid $border-color;
  padding: 2rem;
  background-color: #fefefe;
  max-width: 794px;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 2;
}
.text-decoration {
  text-decoration: underline;
}
.text-indent {
  text-indent: 3.2rem;
}
.right-date {
  min-width: 14rem;
}
.notice-divider {
  height: 2px;
  border: 1px dashed #333;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
</style>
